<template>
    <div class="bj" id="index">
        <!-- 左边框left -->
        <div class="left">
            <div style="font-weight: 500; text-align: center; font-size: 24px;color: white;">OPDER聚造</div>
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="transparent"
                text-color="#fff"
                :router="true"
                active-text-color="#ffd04b">
                <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-s-home"></i>
                    <span>首页管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/index/banners">轮播图管理</el-menu-item>
                    <el-menu-item index="/index/category">分类区管理</el-menu-item>
                    <el-menu-item index="/index/recommend">分类推荐管理页</el-menu-item>
                </el-menu-item-group>
                </el-submenu>

                <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>商品管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="fenlei">分类管理</el-menu-item>
                    <el-menu-item index="2-2">品牌管理</el-menu-item>
                    <el-menu-item index="2-3">商品管理</el-menu-item>
                </el-menu-item-group>
                </el-submenu>     
                
                <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-s-tools"></i>
                    <span>新闻管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="donghuan">动画页面</el-menu-item>
                    <el-menu-item index="text">测试效果页面</el-menu-item>
                </el-menu-item-group>
                </el-submenu>   
            </el-menu>
        </div>
        <!-- 右边框right -->
        <div class="right">
            <!-- 表单地址和用户信息栏 -->
            <div style="display: flex; justify-content: space-between;">
                <div style="padding-top: 45px;">
                    <!-- <router-view></router-view> -->
                    <!-- 管理页名字 -->
                    <b>{{$route.meta.title}}</b>
                </div>
                <div class="uss" id="index">
                    <img style="border:2px solid #ccc;height:80px;width:80px;border-radius:50%" src="http://localhost:3000/uploads/1518204179980619776.png" alt="4">
                    <el-tooltip>
                        <div slot="content" @click="dialogFormVisible = true">修改密码</div>
                        <div class="super">{{nickName}} 小王，您好!</div>                                             
                    </el-tooltip>
                    <div class="exit" @click="logout">退出</div>
                </div>
            </div>
            <!-- 白色框，活动信息填写栏 -->            
            <!-- 引用路由，看每一个view页面里div所写的内容 -->
            <router-view></router-view>
        </div>
        <!-- 修改密码 -->
        <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px">
            <el-form-item label="原密码" prop="passWord">
                <el-input type="password" v-model="form.passWord"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassWord">
                <el-input type="password" v-model="form.newPassWord"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="reNewPassWord">
                <el-input type="password" v-model="form.reNewPassWord"></el-input>
            </el-form-item>           
            </el-form>  
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="changePassWord">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import md5 from 'js-md5'
export default {
  name: "index",
  components: {

  },
  data() {
    return {
        photo:'',
        nickName:'',
        dialogFormVisible:false,
        form:{
            passWord:'',
            newPassWord:'',
            reNewPassWord:''
        },
        group:{//选中的群组
            groupId:'',
            groupName:''
        },
        menus:[],
        rules:{
            passWord:[
                { required: true, message: '请输入原密码', trigger: 'blur' }
            ],
            newPassWord:[
                { required: true, message: '请输入新密码', trigger: 'blur' }
            ],
            reNewPassWord:[
                { required: true, message: '请重复输入新密码', trigger: 'blur' },
                { validator: (rule, value, callback) => {
                    if (value === '') {
                    callback(new Error('请再次输入密码'));
                    } else if (value !== this.form.newPassWord) {
                    callback(new Error('两次输入密码不一致!'));
                    } else {
                    callback();
                    }
                }, trigger: 'blur' }
            ]
        }
    }
  },
  methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      changePassWord(){
      this.$refs.form.validate((valid) => {
         if (valid) {
          this.$http({
            url:'/admin/changePassWord',
            method:'POST',
            data:{
              passWord:md5(this.form.passWord),
              newPassWord:md5(this.form.newPassWord),
            //   userName:this.form.userName
             }
          }).then(res => {
            if(!res.errorMsg){
              this.$message({
                  message:'修改密码成功',
                  type:'success',
                  duration:3000
              });
              setTimeout(() => {
                  location.href = '#/login'
              },3000)
            }
          })
        } 
      });     
      },
      logout(){
          this.$confirm("是否退出登录?","提示", {
              confirmButtonText:"确定",
              cancelButtonText:"取消",
              type: "warning",
          }).then(() => {
              this.$http({
                  url:"/admin/logout",
              }).then((res) => {
                  if(res.errorMsg){
                      this.$message.error(res.errorMsg);
                  }else{
                      localStorage.removeItem('token')
                      localStorage.removeItem('user')
                      location.href = "#/login";
                  }
              })
          })
      }
  },
  created() {
      //从缓存获取登录用户信息
      let user = localStorage.getItem("user");
      if(!user){
        //   this.$router.push('/login')
        //   history.reload()
        console.log(history,location)
        location.href = location.origin + '#/login'
      }
      //解析为对象
      user = JSON.parse(user);
      //设置头像
      this.photo = user.avatarUrl || require("../assets/images/4.png");
      console.log(user);
      console.log(this.photo);
      //设置昵称
      this.nickName = user.nickName || "小王" ;
      //获取菜单
      //this.getMenus()
  },
  mounted() {},
};
</script>

<style>
.bj{
background: #EFF6FC;
width: 1660px;
height: 932px;
margin-left: 110px;
background-size: 100% 100%;
background-attachment: local;
}
.left{
    background:url('../assets/images/1.png');
    position: absolute;
    width: 254px;
    height: 932px;
}
.sz{
    margin-top: 32px;
    margin-left: 69px; 
    color: #AAAAAA;
}
.right{
    margin-left: 298px;
}
.uss{
    display: flex;
    align-items: center;
    padding-top: 36px;
    margin-right:24px ;
}
.super{
    color:#EAB924 ;
    margin: 0px 10px;
}
.exit{
    width: 85px;
    height: 25px;
    padding-top: 4px;
    margin-left: 10px;
    border-radius: 30px 30px 30px 30px;
    background: red;
    color: #fff;
    text-align: center;
}
/* .right-background{
    background: #f5f5f5;
    margin-top: 47px;
    height: 750px;
    display: flex;
} */


</style>